{extend name='base'}
{block name='content'}
<style type="text/css">
	body{
		background: url('{$Think.APP_URL}public/logo.png') center center no-repeat;
		background-color: #f5f5f5;
		background-size: cover;
		height: 100%;
	}
	.user-box{
		background-color: #fff;
		padding: 10px;
	}
	.user-box .title{
		font-size: 18px;
	    color: #555;
	    text-align: center;
	    margin: 15px auto;
	    margin: 10px auto;
	    text-shadow: 1px 1px 1px #f5f5f5;
	    letter-spacing: 2.5px;
	}
	.user-box .input{
		border: 1px solid #ddd;
		outline: none;
		font-size: 14px;
	    height: 40px;
	    line-height: 40px;
	    padding:0 10px;
	    width: 90%;
	    text-indent: 2em; 
	    background: #fff;
	    color: #777;
	    width: 100%;
	}

	.user-box .form-group{
		position: relative;
	}
	.user-box .form-group i{
		position: absolute;
		left: 25px;
		top: 10px;
		font-size: 20px;
		color: #777;
	}

	.user-box .form-group .captcha{
		position: absolute;
		right:16px;
		top:1px;
	}
</style> 
<div class="box-block user-box"> 
		<div class="title">{:sys()['app_name']}用户注册</div>
		<form class="form-horizontal" method="post" enctype="multipart/form-data">
			<div class="form-group">
			     <div class="col-xs-12 text-center"> 
			     	<label class="radio-inline" style="width:48%;"><input type="radio" name="group_id" value="1">普通用户</label>
			     	<label class="radio-inline" style="width:48%;"><input type="radio" name="group_id" value="2">作曲家</label>
			     </div>
			</div>
			<div class="form-group">
			     <div class="col-xs-12">
			     	<i class="iconfont icon-wode"></i><input type="text" name="user_name" class="input" placeholder="用户名" datatype="*">
			     </div>
			</div>
			<div class="form-group">
			     <div class="col-xs-12">
			     	<i class="iconfont icon-mima"></i><input type="password" name="password" class="input" placeholder="密码" datatype="*">
			     </div>
			</div>
			<div class="form-group">
			     <div class="col-xs-12">
			     	<i class="iconfont icon-mima"></i><input type="password" name="repassword" class="input" placeholder="确认密码" datatype="*" recheck="password">
			     </div>
			</div> 
			<div class="form-group">
			     <div class="col-xs-12">
			     	<i class="iconfont icon-album"></i><input type="text" name="captcha" class="input" placeholder="验证码" datatype="*">
			     	<div class="captcha">
			     		<img src="{:captcha_src()}" height="38" onclick="this.src='{:captcha_src()}?'+Math.random()" title="点击刷新">
			     	</div>
			     </div>
			</div>
			<div class="form-group">
			     <div class="col-xs-12">
			     	<input type="submit" class="btn btn-primary" value="立即注册" style="width: 100%; height: 40px;">
			     </div>
			</div>
		</form>
</div> 
<script type="text/javascript">
	$(function () {
		$('body').height($(window).height());

		// 垂直居中
		var w_h=$(window).height();
		var lbox_h=$('.user-box').height();
		if (w_h>lbox_h) {
			var margin=(w_h-lbox_h)/3;
			$('.user-box').css('margin-top',margin);
		}
	})
</script> 
{/block}